<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/font/iconfont.css">
    <title>景区蓝牙配置</title>
    <style>
        input {
            outline: none;
            -webkit-appearance: none;
            border-radius: 0;
            border-style: none;
            background-color: transparent;
        }

        .main {
            background: white;
            min-height: 490px;
            box-shadow: 1px 1px 2px #AAAAAA;
        }

        .layui-input-inline {
            width: 240px !important;
        }
    </style>
</head>
<body style="margin: 15px;height: 95%">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>景区蓝牙配置</legend>
</fieldset>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <a href="javascript:;" class="layui-btn layui-btn-small" id="add">
            <i class="layui-icon">&#xe608;</i> 添加设备
        </a>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>蓝牙设备列表</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
    <input id="touristAttraction" type="hidden" value="<$ touristAttraction $>">
</div>


<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/layui/layui.js"></script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/html" id="tourist_attractionTpl">
    {{ getName(d.tourist_attraction) }}
</script>

<script>
  function getName(code) {
    var arr = JSON.parse($("#touristAttraction").val());
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].type_code == code) {
        return arr[i].name;
      }
    }
  }

  var $, layer, laytpl, table;
  layui.use(['layer', 'table', 'laytpl'], function () {
    $ = layui.jquery;
    layer = layui.layer;

    layerTips = parent.layer === undefined ? layui.layer : parent.layer; //获取父窗口的layer对象
    layer = layui.layer; //获取当前窗口的layer对象
    table = layui.table;
    laytpl = layui.laytpl;

    table.render({
      elem: '#test'
      , url: 'beacon/list?x-tm-token=' + localStorage.tmToken + '&v=' + new Date().getTime()
      , cols: [[
        {field: 'id', title: '序号', sort: true}
        , {field: 'tourist_attraction', title: '景区签到点名称', templet: '#tourist_attractionTpl'}
        , {field: 'major', title: 'major'}
        , {field: 'minor', title: 'minor'}
        , {align: 'center', toolbar: '#barDemo'}

      ]]
      , page: true
    });

    //监听工具条
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除行么', function (index) {
          obj.del();
          deleteBeacon(obj.data.id);
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        layer.open({
          type: 2,
          area: ['450px', '350px'],
          title: '添加设备',
          content: '/beacon/editPage?x-tm-token=' + localStorage.tmToken + '&id=' + obj.data.id
          + '&attraction=' + obj.data.tourist_attraction + '&minor=' + obj.data.minor + '&major=' + obj.data.major
        });
      }
    });

    $('#add').on('click', function () {
      layer.open({
        type: 2,
        area: ['450px', '350px'],
        title: '添加设备',
        content: '/beacon/editPage?x-tm-token=' + localStorage.tmToken
      });
    });

  })


  function deleteBeacon(id) {
    $.get('/beacon/delete?id=' + id + '&x-tm-token=' + localStorage.tmToken);
  }
</script>
</body>
</html>